<template>
 
   <div class="conatiner">
      <!-- <hello-world-echarts class="item"></hello-world-echarts>
      <pie-chart-1 class="item"></pie-chart-1>
      <pie-chart-2 class="item"></pie-chart-2>
      <pie-chart-3 class="item"></pie-chart-3>
      <line-c-hart-1 class="item"></line-c-hart-1>
      <line-c-hart-2 class="item"></line-c-hart-2>
      <line-c-hart-3 class="item"></line-c-hart-3>
      <line-c-hart-4 class="item"></line-c-hart-4>
      <bar-chart-1 class="item"></bar-chart-1>
      <bar-chart-2 class="item"></bar-chart-2>
      <bar-chart-3 class="item"></bar-chart-3>
      <bar-chart-4 class="item"></bar-chart-4>
      <bar-chart-5 class="item"></bar-chart-5>
      <radar-chart class="item"></radar-chart>
      <word-count class="item"></word-count>
      <axios-chart  class="item"></axios-chart>  -->
      <!-- <china-map-chart></china-map-chart> -->
      <!-- <xian-map-chart></xian-map-chart> -->
      <ws-chart></ws-chart>
   </div>
   
</template>

<script>
/**
 * echarts的基本使用步骤
 * 1、下载echarts的依赖包:npm i echarts
 * 2、准备一个div容器用来呈现echarts
 * 3、使用集体导入echarts：import * as echarts from 'echarts'
 * 4、初始化echarts
 *  mounted(){
        let chart=echarts.init(this.$refs.chart)
    }
   5、定义报表的参数对象[关键点]
   6、设置报表参数对象到chart对象中:chart.setOption(options)
 */
import HelloWorldEcharts from '@/views/HelloWorldEcharts.vue'
import PieChart1 from './views/PieChart1.vue'
import PieChart2 from './views/PieChart2.vue'
import PieChart3 from './views/PieChart3.vue'
import LineCHart1 from './views/LineChart1.vue'
import LineCHart2 from './views/LineChart2.vue'
import LineCHart3 from './views/LineChart3.vue'
import LineCHart4 from './views/LineChart4.vue'
import BarChart1 from './views/BarChart1.vue'
import BarChart2 from './views/BarChart2.vue'
import BarChart3 from './views/BarChart3.vue'
import BarChart4 from './views/BarChart4.vue'
import BarChart5 from './views/BarChart5.vue'
import RadarChart from './views/RadarChart.vue'
import WordCount from './views/WordCount.vue'
import AxiosChart from './views/AxiosChart.vue'
import ChinaMapChart from './views/ChinaMapChart.vue'
import XianMapChart from './views/XianMapChart.vue'
import WsChart from './views/WsChart.vue'

export default {
   components:{
      HelloWorldEcharts,
      PieChart1,
      PieChart2,
      PieChart3,
      LineCHart1,
      LineCHart2,
      LineCHart3,
      LineCHart4,
      BarChart1,
      BarChart2,
      BarChart3,
      BarChart4,
      BarChart5,
      RadarChart,
      WordCount,
      AxiosChart,
      ChinaMapChart,
      XianMapChart,
      WsChart
   }
}
</script>

<style lang="scss" scoped>
   .conatiner{
     display: flex;
     flex-wrap: wrap;
    justify-content: center;
     .item{
      width: 300px;
      height: 200px;
      border: 2px solid #ccc;
      margin: 10px;
     }
   }  
</style>